<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>dhtmlxGrid. Basics</title>
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid_skins.css">
	<script src="../../codebase/dhtmlxcommon.js"></script>
	<script src="../../codebase/dhtmlxgrid.js"></script>
	<script src="../../codebase/dhtmlxgridcell.js"></script>
	<script>
		var mygrid;
		function doInitGrid(){
			mygrid = new dhtmlXGridObject('mygrid_container');
			mygrid.setImagePath("codebase/imgs/");
			mygrid.setHeader("Model,Qty,Price");
			mygrid.setInitWidths("*,150,150");
			mygrid.setColAlign("left,right,right")
			mygrid.setSkin("light");
			mygrid.setColSorting("str,int,int");
			mygrid.setColTypes("ed,ed,price");
			mygrid.attachEvent("onRowSelect",doOnRowSelected);
			mygrid.init();
			mygrid.loadXML("step3.xml");
		}
		function addRow(){
			var newId = (new Date()).valueOf()
			mygrid.addRow(newId,"",mygrid.getRowsNum())
			mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
		}
		function removeRow(){
			var selId = mygrid.getSelectedId()
			mygrid.deleteRow(selId);
		}
		
		function doOnRowSelected(rowID,celInd){
			alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
		}
	
	</script>	

</head>

<body onload="doInitGrid()">

<H1>dhtmlxGrid. Step-by-step guide. Basics</H1>

<div><a href="ch_basics.html">Step-by-step instructions</a></div>
<br><br>

<div id="mygrid_container" style="width:600px;height:150px;"></div>
<br>
<button onclick="addRow()">Add Row</button>
&nbsp;
<button onclick="removeRow()">Remove Row</button>

<p>&copy; DHTMLX LTD, 2008</p>
</body>
</html>
